<template>
  <view class="content">
    <block v-for="(item, index) in list" :key="index">
      <view class="main">
        <view class="title">
          <view class="left">
            <image :src="mathIcon(item.Platform)" mode=""></image>
            <text>{{ item.Tip }}</text>
          </view>
          <view class="right">
            <text>{{ item.CreateTime }}</text>
            <!-- <text>{{ item.timeDetail }}</text> -->
          </view>
        </view>
        <view class="message">
          <view class="deep">
            <text>{{ item.Title }}</text>
          </view>
          <view class="light">
            <text>{{ item.Detail }}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    list: null,
  },
  methods: {
    mathIcon(platform) {
      switch (platform) {
        case 1: //救在身边
          return "/static/message/help.png";
        case 2: //杭红捐赠
          return "/static/message/give.png";
        case 3: //杭红荟
          return "/static/message/red.png";
      }
      return "";
    },
  },
  data() {
    return {
      cardList: [
        {
          icon: "/static/message/help.png",
          title: "就在身边",
          time: "上午",
          timeDetail: "7:33",
          deep: "加入区县：杭州市余杭区红十字会",
          light: "志愿者活动已提交至红十字会工作人员，请耐心等待通过",
        },
        {
          icon: "/static/message/give.png",
          title: "就在身边",
          time: "上午",
          timeDetail: "7:33",
          deep: "加入区县：杭州市余杭区红十字会",
          light: "志愿者活动已提交至红十字会工作人员，请耐心等待通过",
        },
        {
          icon: "/static/message/red.png",
          title: "就在身边",
          time: "上午",
          timeDetail: "7:33",
          deep: "加入区县：杭州市余杭区红十字会",
          light: "志愿者活动已提交至红十字会工作人员，请耐心等待通过",
        },
        {
          icon: "/static/message/help.png",
          title: "就在身边",
          time: "上午",
          timeDetail: "7:33",
          deep: "加入区县：杭州市余杭区红十字会",
          light: "志愿者活动已提交至红十字会工作人员，请耐心等待通过",
        },
        {
          icon: "/static/message/help.png",
          title: "就在身边",
          time: "上午",
          timeDetail: "7:33",
          deep: "加入区县：杭州市余杭区红十字会",
          light: "志愿者活动已提交至红十字会工作人员，请耐心等待通过",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #edf0f5;
  padding-bottom: 100rpx;
  .main {
    margin: 30rpx 25rpx 0 25rpx;
    padding: 35rpx 25rpx;
    background: #ffffff;
    border-radius: 10rpx;
    .title {
      padding-bottom: 26rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: #f4f4f4 1px solid;
      .left {
        display: flex;
        align-items: center;
        image {
          width: 38rpx;
          height: 36rpx;
        }
        text {
          margin-left: 20rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #222222;
        }
      }
      .right {
        text {
          margin-right: 10rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #999999;
        }
      }
    }
    .message {
      margin-top: 26rpx;
      text-align: center;
      .deep {
        margin-bottom: 30rpx;
        font-size: 26rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #222222;
      }
      .light {
        font-size: 24rpx;
        font-family: PingFang;
        font-weight: 400;
        color: #8b8b8b;
      }
    }
  }
}
</style>

